<template>
  <div class="statistic-card-main">
    <el-card class="card-box">
      <div class="statistic-grid">
        <!-- 用户量统计 -->
        <div class="statistic-item">
          <div class="icon-wrapper user-icon">
            <el-icon><user /></el-icon>
          </div>
          <div class="statistic-content">
            <el-statistic :value="userTotalValue" :precision="0">
              <template #title>
                <div class="statistic-title">用户量</div>
              </template>
            </el-statistic>
          </div>
        </div>

        <!-- 文章数统计 -->
        <div class="statistic-item">
          <div class="icon-wrapper article-icon">
            <el-icon><document /></el-icon>
          </div>
          <div class="statistic-content">
            <el-statistic :value="blogTotalValue" :precision="0">
              <template #title>
                <div class="statistic-title">文章数</div>
              </template>
            </el-statistic>
          </div>
        </div>

        <!-- 评论数统计 -->
        <div class="statistic-item">
          <div class="icon-wrapper comment-icon">
            <el-icon><chat-dot-round /></el-icon>
          </div>
          <div class="statistic-content">
            <el-statistic :value="commentTotalValue" :precision="0">
              <template #title>
                <div class="statistic-title">评论数</div>
              </template>
            </el-statistic>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useTransition } from '@vueuse/core';
import { getBlogStatistic } from '@/api/blogList';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { User, Document, ChatDotRound } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const UserStore = useUserStore();

// =============== 统计面板数据 start ===============
const userTotal = ref<number>(0);
const userTotalValue = useTransition(userTotal, { duration: 1500 });

const blogTotal = ref<number>(0);
const blogTotalValue = useTransition(blogTotal, { duration: 1500 });

const commentTotal = ref<number>(0);
const commentTotalValue = useTransition(commentTotal, { duration: 1500 });
// =============== 统计面板数据 end ===============

// 统计面板数据
const getStatistic = () => {
  getBlogStatistic()
    .then(response => {
      if (response.data) {
        userTotal.value = Number(response.data.userTotal) || 0;
        blogTotal.value = Number(response.data.blogTotal) || 0;
        commentTotal.value = Number(response.data.commentTotal) || 0;
      } else {
        console.error('获取统计数据失败', response);
      }
    })
    .catch(error => {
      console.error('API请求失败', error);
    });
};

// 初始化
onMounted(() => {
  getStatistic();
});
</script>

<style scoped lang="scss">
.statistic-card-main {
  width: 100%;

  .card-box {
    margin-bottom: 10px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  :deep(.el-card__body) {
    padding: 12px;
  }
}

.statistic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.statistic-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--el-bg-color-overlay);
  transition: all 0.3s;

  &:hover {
    background: var(--el-color-primary-light-9);

    .icon-wrapper {
      transform: scale(1.1);
    }
  }
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  margin-right: 8px;
  transition: all 0.3s;

  :deep(.el-icon) {
    font-size: 20px;
    color: #fff;
  }

  &.user-icon {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
  }

  &.article-icon {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  }

  &.comment-icon {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
  }
}

.statistic-content {
  flex: 1;

  :deep(.el-statistic) {
    --el-statistic-content-font-size: 20px;
    --el-statistic-title-font-size: 12px;
  }

  .statistic-title {
    color: var(--el-text-color-secondary);
    margin-bottom: 2px;
  }

  :deep(.el-statistic__content) {
    color: var(--el-text-color-primary);
    font-weight: 600;
  }
}
</style>
